<template>
	<view class="bossGame">
		<block>
			<gameBasics backgroundColor="rgba(0,0,0,0)" />
			<view class="bg">
			</view>
			<view style="display: flex;justify-content: center;height: 100vh;margin: 0 auto;align-items: center;">
				<block v-if="game_chall.length==2">
					<view class="item">
						<view class="sum">
							累计得分：{{game_chall[0].number_sum}}
						</view>
						<view class="team_information_">
							<image :src="game_chall[0].teamList.pic" mode="aspectFill"></image>
							<text>{{game_chall[0].teamList.title}}</text>
						</view>
						<block
							v-if="userPeople.teamId==game_chall[0].teamList.id&&game_chall[0].status!==3&&game_chall[0].status!==4&&userPeople.cap_zt==2">
							<view class="num">
								<u-icon name="minus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)"
									@click="reduce" @touchstart="onTouchStart('reduce')" @touchend="onTouchEnd">
								</u-icon>
								<view class="text">
									{{number}}
								</view>
								<u-icon name="plus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)" @click="add"
									@touchstart="onTouchStart('add')" @touchend="onTouchEnd"></u-icon>
							</view>

							<view class="btn" @click="submit">
								OK
							</view>
						</block>
						<view class="textType" v-else :style="{fontSize:game_chall[0].status==2?'':'40rpx'}">
							{{game_chall[0].status==2?'成绩输入中':game_chall[0].number}}
						</view>
					</view>
					<view class="textPk">
						<view class="" v-if="game_config.type!=10&&!(game_config.type==9&&teamList.length==2)">
							第{{game_config.turn_num}}轮
						</view>
						<view class="">
							<block v-if="game_config.part_num<=game_config.game_num">
								第{{game_config.part_num}}/{{game_config.game_num}}局
							</block>
							<block v-else>
								加时赛
							</block>

						</view>
					</view>
					<view class="item">
						<view class="sum">
							累计得分：{{game_chall[1].number_sum}}
						</view>
						<view class="team_information_">
							<image :src="game_chall[1].teamList.pic" mode="aspectFill"></image>
							<text>{{game_chall[1].teamList.title}}</text>
						</view>
						<block
							v-if="userPeople.teamId==game_chall[1].teamList.id&&game_chall[1].status!==3&&game_chall[1].status!==4&&userPeople.cap_zt==2">
							<view class="num">
								<u-icon name="minus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)"
									@click="reduce" @touchstart="onTouchStart('reduce')" @touchend="onTouchEnd">
								</u-icon>
								<view class="text">
									{{number}}
								</view>
								<u-icon name="plus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)" @click="add"
									@touchstart="onTouchStart('add')" @touchend="onTouchEnd"></u-icon>
							</view>

							<view class="btn" @click="submit" :style="{filter: status?'grayscale(0%)':''}">
								{{status?'待确认':'OK'}}
							</view>
						</block>
						<view class="textType" v-else :style="{fontSize:game_chall[1].status==2?'':'40rpx'}">
							<!-- game_chall[1].result_confirm?'待确认：':'已确认'+ -->
							{{game_chall[1].status==2?'成绩输入中':game_chall[1].number}}
						</view>
					</view>

				</block>
				<block v-else>
					<view class="item" v-for="(item ,index) in game_chall">
						<view class="sum">
							累计得分：{{item.number_sum}}
						</view>
						<view class="team_information_">
							<image :src="item.teamList.pic" mode="aspectFill"></image>
							<text>{{item.teamList.title}}</text>
						</view>
						<block
							v-if="userPeople.teamId==item.teamList.id&&item.status!==3&&item.status!==4&&userPeople.cap_zt==2">
							<view class="num">
								<u-icon name="minus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)"
									@click="reduce" @touchstart="onTouchStart('reduce')" @touchend="onTouchEnd">
								</u-icon>
								<view class="text">
									{{number}}
								</view>
								<u-icon name="plus-circle-fill" color="#F9CC68" size="calc(70vmin / 7.5)" @click="add"
									@touchstart="onTouchStart('add')" @touchend="onTouchEnd"></u-icon>
							</view>

							<view class="btn" @click="submit" :style="{filter: status?'grayscale(0%)':''}">
								{{status?'待确认':'OK'}}
							</view>
						</block>
						<view class="textType" v-else :style="{fontSize:item.status==2?'':'40rpx'}">
							{{item.status==2?'成绩输入中':item.number}}
						</view>

					</view>

				</block>

			</view>

		</block>
		<!-- -if="game_config.type==10" -->
<!-- 
		<view class="count_down_pk">
			<view class="animation_setout_left" :style="{transform: audioShow?'translateX(-200%)':'translateX(0%)'}">

				<view class="animation_setout_left_angle">

				</view>
				<view class="team_list" style="right: calc(50vmin / 7.5);">

					<view class="team_item" v-for="(item ,index) in game_challPk1">
						<view class="">
							<image :src="item.teamList.pic" mode="aspectFill"
								style="border:calc(4vmin / 7.5) solid #FED194"></image>
							<view class="">
								{{item.teamList.title}}
							</view>
						</view>

					</view>


				</view>


			</view>
			<view class="animation_setout_right" :style="{transform: audioShow?'translateX(200%)':'translateX(0%)'}">
				<view class="animation_setout_right_angle">

				</view>
				<view class="team_list" style="left: calc(50vmin / 7.5);">

					<view class="team_item" v-for="(item ,index) in game_challPk2">
						<view class="">
							<image :src="item.teamList.pic" mode="aspectFill"
								style="border:calc(4vmin / 7.5) solid #FED194"></image>
							<view class="">
								{{item.teamList.title}}
							</view>
						</view>

					</view>


				</view>
			</view>
		</view>
		<view class="count_down" v-if="!audioShow" >
			{{autoContTime}}
		</view> -->



		<gameLoading />
	</view>
</template>

<script>
	let autoCont = null
	let playCode = false
	let reduceTime = null
	let autoTime=null
	export default {
		data() {
			return {
				number: 0,
				longPressTimer: null,
				eliminate: false,
				gameData: {},
				game_chall: [],
				teamList: [],
				userPeople: {},
				status: false,
				game_config: {},
				acceptStatus: true,
				audioShow: true,
				game_challPk1: [],
				game_challPk2: [],
				autoContTime: '开始'
			}
		},
		computed: {
			numText() {
				let number = this.number
				let l = 0;
				while (number >= 1) {
					number = number / 10;
					l++;
				}
				l = 2 - l
				for (let i = 0; i < l; i++) {
					if (i < 2) this.number = '0' + this.number
				}
			}
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
			autoCont.stop()
			autoCont.destroy()
			autoCont=null
		},
		onShow() {
			this.audioShow=true


		},

		mounted() {
autoCont=uni.createInnerAudioContext()
			uni.$on('onMessage', (res) => {
				if(!this.acceptStatus) return;
					this.$nextTick(() => {
						this.$store.commit('switchGame', {
							code: false
						})


					})
					if (res.data.code != 202) return;
					this.gameData = res.data.game
					this.game_config = res.data.game_config
					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					this.game_chall = res.data.game_chall
					let index = ~~(this.game_chall.length / 2)
					this.game_challPk1 = res.data.game_chall.slice(0, index)
					this.game_challPk2 = res.data.game_chall.slice(index)


				 if(this.game_config&&(this.gameData.current_time-this.game_config.game_time)<3){
					
					 // if (this.game_config.type == 10) {
					 	autoCont.src = this.game_config.pk_video.docx;
					 // } else {
					 // 	autoCont.src =
					 // 		'http://ylxhbk.goldsu.cn/file // }
					 autoCont.sessionCategory = 'ambient'

					 
					 autoCont.onCanplay((res) => {
							autoCont.play()
					 // 	let intervalID = setInterval(() => {
					 		
					 // 		if (autoCont.duration !== 0) {
					 			
					 // 			// this.$store.commit('setAudioCodeDelayed', {
					 // 			// 	code: ~~autoCont.duration*1000
					 // 			// })
					 // 			this.autoContTime = ~~autoCont.duration
					 // // 			if (!reduceTime) {
					 // // 				reduceTime = setInterval(() => {
					 // // 					if (this.autoContTime <= 0) {
					 // // 						this.autoContTime = '开始'
					 // // 						setTimeout(() => {
					 // // 							this.audioShow = true
					 // // 						}, 1000)
					 // // 						clearInterval(reduceTime)
					 // // 					} else {
					 // // 						this.autoContTime--
					 // // 					}
					 
					 // // 				}, 1000)
					 // // 			}
					 // 			clearInterval(intervalID); // 清除定时器
					 // 		}
					 // 	}, 500);
					 // 	console.log(autoCont.duration);
					 })
					 autoCont.onPlay(() => {
						  console.log('播放')
					 	this.audioShow = false
					 	playCode = true
					 })
					 autoCont.onEnded(() => {
					 	playCode = false
					 	this.audioShow = true
					 // 	autoCont.stop()
					 // 	autoCont.destroy()
						// autoCont=null

					 })
				 }

					
					//是否已提交
					this.status = false
					res.data.game_chall.forEach(item => {
						if (item.result_confirm) {
							console.log(item.team_id, this.userPeople.teamId)
							if (item.team_id == this.userPeople.teamId) this.status = true
						}
					})
	
			})
			
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
					if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
			if (this.game_config.type == 9) {
				this.autoContTime = 3
				reduceTime = setInterval(() => {
					this.autoContTime--
					if (!this.autoContTime) {
						clearInterval(reduceTime)
						this.autoContTime = '开始'
					}
				}, 1000)
			}


		},
		methods: {
			submit() {
				if (this.status) return;
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId,
					number: ~~this.number
				}
				this.$myRuquestWs('home/game/game_end_pk', data).then(res => {

				})
			},
			reduce() {
				if (this.number == 0) return;
				this.number--
			},
			add() {
				this.number++
			},
			longPressStep(type) {
				// 每隔一段时间，重新调用longPressStep方法，实现长按加减
				if (!this.eliminate) return;
				this.clearTimeout()
				this.longPressTimer = setTimeout(() => {
					this[type]()
					this.longPressStep(type)
				}, 50);
			},
			onTouchStart(type) {
				this.clearTimeout()
				// 一定时间后，默认达到长按状态
				this.longPressTimer = setTimeout(() => {
					this.eliminate = true
					this[type]()
					this.longPressStep(type)
				}, 600)
			},
			// 触摸结束，清除定时器，停止长按加减
			onTouchEnd() {
				this.clearTimeout()
				this.eliminate = false

			},
			// 清除定时器
			clearTimeout() {
				clearTimeout(this.longPressTimer)
				this.longPressTimer = null

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bossGame{
		width: 100vw;
		height: 100vh;
	}
	.count_down {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: calc(100vmin / 7.5);
		color: $theme-color;
		font-weight: 700;
		line-height: 20vh;
		text-align: center;
	}

	.animation_setout_left {
		position: absolute;
		width: calc(50vw - calc(100vmin / 7.5));
		height: 100vh;
		left: 0;
		top: 0;
		background-color: #4B85DC;
		transform: translateX(-100%);
		transition: all 1s cubic-bezier(.2, .4, .6, 1);
		// animation: aniLeft 1s ease-in 1;

		.animation_setout_left_angle {
			width: 0;
			height: 0;
			border: rgba(0, 0, 0, 0) solid calc(200vmin / 7.5);
			border-bottom: #4B85DC solid 100vh;
			position: absolute;
			top: calc(-200vmin / 7.5);
			right: calc(-200vmin / 7.5);
		}
	}

	.animation_setout_right {
		position: absolute;
		width: calc(50vw - calc(100vmin / 7.5));
		height: 100vh;
		right: 0;
		top: 0;
		background-color: red;
		transform: transateX(100%);
		transition: all 1s cubic-bezier(.2, .4, .6, 1);
		// animation: aniRight 1s ease-in 1;

		.animation_setout_right_angle {
			width: 0;
			height: 0;
			border: rgba(0, 0, 0, 0) solid calc(200vmin / 7.5);
			border-top: red solid 100vh;
			position: absolute;
			top: calc(0vmin / 7.5);
			left: calc(-200vmin / 7.5);
		}
	}

	.team_list {
		position: absolute;

		top: 50%;
		transform: translateY(-50%);
		display: flex;

		.team_item {
			font-weight: 700;
			font-size: calc(32vmin / 7.5);
			text-align: center;
			color: $theme-color;

			>view {
				width: calc(180vmin / 7.5);
				height: calc(180vmin / 7.5);

				image {
					width: calc(160vmin / 7.5);
					height: calc(160vmin / 7.5);
				}
			}

		}
	}


	@keyframes aniLeft {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes aniRight {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(0);
		}
	}


	.textPk {
		display: flex;
		flex-direction: column;
		font-size: calc(40vmin / 7.5);
		font-weight: 700;
		margin: 0 calc(100vmin / 7.5);
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.item {
		background: #E9E9E9;
		width: calc(280vmin / 7.5);
		height: calc(400vmin / 7.5);
		padding: calc(20vmin / 7.5);
		border-radius: calc(12vmin / 7.5);
		margin: 0 calc(10vmin / 7.5);
		position: relative;

		.sum {
			position: absolute;
			top: calc(-40vmin / 7.5);
			left: 50%;
			transform: translateX(-50%);
			font-size: calc(26vmin / 7.5);
		}

		.team_information_ {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: calc(120vmin / 7.5);
				height: calc(120vmin / 7.5);
				margin-bottom: calc(10vmin / 7.5);
			}
		}

		.textType {
			font-size: calc(46vmin / 7.5);
			font-weight: 700;
			text-align: center;
			margin-top: calc(80vmin / 7.5);
		}
	}

	.num {
		display: flex;
		justify-content: center;

		.text {
			width: calc(180vmin / 7.5);
			height: calc(150vmin / 7.5);
			font-size: calc(70vmin / 7.5);
			font-weight: 700;
			border-radius: calc(38vmin / 7.5);
			line-height: calc(150vmin / 7.5);
			text-align: center;
			margin: 0 calc(20vmin / 7.5);
			// background-image: linear-gradient(to top, rgba(249, 204, 104, 1), rgba(249, 204, 104, 0), rgba(249, 204, 104, 0), rgba(249, 204, 104, 1));
		}

	}

	.btn {
		background-color: #F9CC68;
		width: calc(200vmin / 7.5);
		height: calc(62vmin / 7.5);
		line-height: calc(62vmin / 7.5);
		margin: 0 auto;
		border-radius: calc(12vmin / 7.5);
		color: #fff;
		border: calc(8vmin / 7.5) solid #EBAC20;
		box-shadow: 0 0 calc(12vmin / 7.5) #EBAC20;
		text-align: center;
	}

	.bg {
		margin: 0;
		padding: 0;
		min-height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;

		background-color: rgba(249, 204, 104, .8);
		overflow: hidden;
	}

	.bg::before,
	.bg::after {
		content: '';
		position: absolute;
		bottom: 15vh;
		min-width: 300vw;
		min-height: 300vw;
		background-color: #fff;
		animation: rote 10s linear infinite;
	}

	.bg::before {
		left: -95%;
		border-radius: 45%;
		opacity: .5;
	}

	.bg::after {
		left: -95%;
		border-radius: 46%;
	}

	@keyframes rote {
		from {
			transform: rotateZ(0);
		}

		to {
			transform: rotateZ(360deg);
		}
	}
</style>
